﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>热区功能</title>
    <link href="../../libs/ol/ol.css" rel="stylesheet" type="text/css" />
    <script src="../../libs/ol/ol.js" type="text/javascript"></script>
<!--    <script src="../../libs/ol/ol-debug.js" type="text/javascript"></script>-->
    <!-- 引入第三方插件库 -->
    <script src="../../libs/jquery-1.11.2.min.js" type="text/javascript"></script>
<!--    <!--Amaze UI JS 插件-->
    <script src="../../libs/AmazeUI/bootstrap.min.js" type="text/javascript"></script>
    <link href="../../libs/AmazeUI/bootstrap.min.css" rel="stylesheet" type="text/css" />-->
     <!--jQuery UI 插件-->
    <script src="../../libs/jquery-ui-1.11.4/jquery-ui.min.js" type="text/javascript"></script>
    <link href="../../libs/jquery-ui-1.11.4/jquery-ui.min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
        body,html,div,ul,li,iframe,p,img{
            border:none;padding:0;margin:0;
            font-size:14px;
            font-family:"微软雅黑";
        }
        #menu{
            width:100%;
            height:45px;         
            padding:5px 10px;
            left:10px;    
        }
        .btn{
           margin-right:15px;
        }        
        #map{
            width:100%;
            height:570px;
        }
        .ui-widget-header { border: 1px solid #aaaaaa; background: #cccccc url(images/ui-bg_highlight-soft_75_cccccc_1x100.png) 50% 50% repeat-x; color: #222222; font-weight: bold; }
        .ui-widget, .ui-widget input, .ui-widget select{font-size:14px;font-family:"微软雅黑";}
        .ui-widget .ui-widget{font-size:14px; font-family:"微软雅黑"; color: #222222;}
    </style>
</head>
<body>
    <div id="menu">
        <label class="title" > 热区功能：</label>
        <button id="showReg" class="btn" title="加载热区后请用鼠标移动到热区范围显示其信息">显示热区</button>
        <button id="drawReg" class="btn" title="单击绘制热区按钮后请用鼠标在地图上绘制热区">绘制热区</button> 
        <button id="deleteReg" class="btn" title="单击删除热区按钮后请用鼠标在地图上选中删除要素操作">删除热区</button>         
    </div> 
    <div id="dialog-confirm" title="图形属性信息设置">
        <label>信息类别(infoType):高校区域</label><br />
        <label>名称(name):</label>
        <input type="text" value="" id="name" />
        <br />
        <label>省市(city):</label>
        <input type="text" value="武汉市" id="city" />
    </div>
    <div id="dialog-delete" title="删除热区要素确认">
        <label>请确认是否删除该要素</label><br />
    </div>
    <div id="map" >
         <!-- Popup -->
        <div id="popup" class="ol-popup" ></div>
    </div>
    <script type="text/javascript">
        var flashFeature;  //热区要素
        var preFeature;  //前一个热区要素
        var flag = false; //是否是同一个要素的标识
        var feature; //当前鼠标选中要素
        var draw; //绘制对象
        var geoStr = null; // 当前绘制图形的坐标串
        var currentFeature = null; //当前绘制的几何要素

        //绘制热区的样式
        var flashStyle = new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 102, 0, 0.2)'
            }),
            stroke: new ol.style.Stroke({
                color: '#cc3300',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#cc3300'
                })
            })
        });
        //矢量要素（区）的样式
        var vectStyle = new ol.style.Style({
            fill: new ol.style.Fill({
                color: 'rgba(255, 255, 255, 0.5)'
            }),
            stroke: new ol.style.Stroke({
                color: '#0099ff',
                width: 2
            }),
            image: new ol.style.Circle({
                radius: 7,
                fill: new ol.style.Fill({
                    color: '#0099ff'
                })
            })
        });

        //矢量数据源
        var vectSource = new ol.source.Vector({
        });
        //矢量图层
        var vectLayer = new ol.layer.Vector({
            source: vectSource,
            style: vectStyle,
            opacity: 0.5
        });

        //矢量数据源（热区）
        var hotSpotsSource = new ol.source.Vector({
        });
        //矢量图层（热区）
        var hotSpotsLayer = new ol.layer.Vector({
            source: hotSpotsSource,
            style: flashStyle,
            opacity: 1
        });

        var map = new ol.Map({
            layers: [
                new ol.layer.Tile({
                    source: new ol.source.MapQuest({ layer: 'osm' })
                }),
                vectLayer,  //矢量要素图层
                hotSpotsLayer  //热区绘制图层
            ],
            target: 'map', //地图容器div的ID
            view: new ol.View({
                center: [12733048, 3571638], //地图初始中心点
                minZoom: 2,
                zoom: 14
            })
        });

        /**
        * 在地图容器中创建一个Overlay
        */
        var element = document.getElementById('popup');
        var popup = new ol.Overlay(/** @type {olx.OverlayOptions} */({
            element: element,
            positioning: 'bottom-center',
            stopEvent: false
        }));
        map.addOverlay(popup);


        /**
        * 通过后台查询热区要素
        */
        function selectRegData() {
            var opType = "select";  //查询数据
            var tableName = "HotSportsInfo";  //数据表名称
            $.ajax({
                url: '../RegDataHandler.ashx', //请求地址
                type: 'POST',  //请求方式为post
                data: { 'type': opType, 'table': tableName }, //传入参数 
                dataType: 'json', //返回数据格式
                //请求成功完成后要执行的方法  
                success: showRegCallBack,
                error: function (err) {
                    alert("执行失败");
                }
            });
        }

        /**
        * 显示热区查询请求回调函数
        * @param {json} data 查询返回的数据
        */
        function showRegCallBack(data) {
            preFeature = null; 
            flag = false;  //还原要素判断标识
            hotSpotsSource.clear(); //清空绘图层数据源
            hotSpotsLayer.setVisible(true); //显示绘图层
            vectSource.clear(); //清空矢量图层数据源

            var resultData = data.obj; //查询结果json数组
            $.each(resultData, function (i, item) {
                //解析结果集中的几何字符串，并转换为多边形的几何数组
                var polyCoords = item.geometry.split(";"); 
                var coordinates = new Array();
                coordinates[0] = new Array();
                for (var i = 0; i < polyCoords.length; i++) {
                    coordinates[0][i] = polyCoords[i].split(",");
                }
                //创建一个新的要素，并添加到数据源中
                var feature = new ol.Feature({
                    geometry: new ol.geom.Polygon(coordinates),
                    name: item.name,
                    id: item.ID
                });
                vectSource.addFeature(feature);
            });
            map.on('pointermove', pointermoveFun,this); //添加鼠标移动事件监听，捕获要素时添加热区功能
        }

        /**
        * 鼠标移动事件监听处理函数（添加热区功能）
        */
        function pointermoveFun(e) {
            var pixel = map.getEventPixel(e.originalEvent);
            var hit = map.hasFeatureAtPixel(pixel);
            map.getTargetElement().style.cursor = hit ? 'pointer' : '';//改变鼠标光标状态

            if (hit) {
                //当前鼠标位置选中要素
                var feature = map.forEachFeatureAtPixel(e.pixel,
                    function (feature, layer) {
                        return feature;
                    });
                //如果当前存在热区要素                   
                if (feature) {
                    //显示热区图层
                    hotSpotsLayer.setVisible(true);
                    //控制添加热区要素的标识（默认为false）
                    if (preFeature != null) {
                        if (preFeature === feature) {
                            flag = true; //当前鼠标选中要素与前一个选中要素相同
                        }
                        else {

                            flag = false; //当前鼠标选中要素不是前一个选中要素
                            hotSpotsSource.removeFeature(preFeature); //将前一个热区要素移除
                            preFeature = feature; //更新前一个热区要素对象
                        }
                    }
                    //如果当前选中要素与之前选中要素不同，在热区绘制层添加当前要素
                    if (!flag) {
                        $(element).popover('destroy'); //销毁popup
                        flashFeature = feature; //当前热区要素
                        flashFeature.setStyle(flashStyle); //设置要素样式
                        hotSpotsSource.addFeature(flashFeature); //添加要素
                        hotSpotsLayer.setVisible(true); //显示热区图层
                        preFeature = flashFeature; //更新前一个热区要素对象                           
                    }
                    //弹出popup显示热区信息
                    popup.setPosition(e.coordinate); //设置popup的位置
                    $(element).popover({
                        placement: 'top',
                        html: true,
                        content: feature.get('name')
                    });
                    $(element).css("width", "120px");
                    $(element).popover('show'); //显示popup

                }
                else {
                    hotSpotsSource.clear(); //清空热区图层数据源
                    flashFeature = null; //置空热区要素
                    $(element).popover('destroy'); //销毁popup
                    hotSpotsLayer.setVisible(false); //隐藏热区图层
                }
            }
            else {
                $(element).popover('destroy'); //销毁popup
                hotSpotsLayer.setVisible(false); //隐藏热区图层
            }
        }


        /**
        * 绘制结束事件的回调函数，
        * @param {ol.interaction.DrawEvent} evt 绘制结束事件
        */
        function drawEndCallBack(evt) {
            map.removeInteraction(draw); //移除绘制控件

            var geoType = "Polygon"; //绘制图形类型          
            $("#dialog-confirm").dialog("open"); //打开属性信息设置对话框
            currentFeature = evt.feature; //当前绘制的要素
            var geo = currentFeature.getGeometry(); //获取要素的几何信息
            var coordinates = geo.getCoordinates(); //获取几何坐标
            //将几何坐标拼接为字符串
            if (geoType == "Polygon") {
                geoStr = coordinates[0].join(";");
            }
            else {
                geoStr = coordinates.join(";");
            }
        }

        /**
        * 提交数据到后台保存
        * @param {string} geoData 区几何数据
        * @param {string} attData 区属性数据
        */
        function saveData( geoData, attData) {
            //通过ajax请求将数据传到后台文件进行保存处理
            var opType = "insert";  //插入数据
            var tableName = "HotSportsInfo";  //数据表名称
            $.ajax({
                url: '../RegDataHandler.ashx', //请求地址
                type: 'POST',  //请求方式为post
                data: { 'type': opType, 'table': tableName, 'geo': geoData, 'att': attData }, //传入参数 
                dataType: 'text', //返回数据格式
                //请求成功完成后要执行的方法  
                success: function (response) {
                    alert(response);
                    selectRegData();//查询数据库中热区要素实现热区功能
                },
                error: function (err) {
                    alert("执行失败");
                }
            });
        }

        /**
        * 将绘制的几何数据与对话框设置的属性数据提交到后台处理
        */
        function submitData() {
            var name = $("#name").val(); //名称
            var city = $("#city").val(); //所属城市
            var attData = name + "," + city;

            if (geoStr != null) {
                saveData(geoStr, attData); //将数据提交到后台处理（保存到数据库中）
                currentFeature = null;  //置空当前绘制的几何要素
                geoStr = null; //置空当前绘制图形的geoStr
            }
            else {
                alert("未得到绘制图形几何信息！");
                vector.getSource().removeFeature(currentFeature); //删除当前绘制图形
            }
        }

        // 初始化绘制热区要素信息设置对话框
        $("#dialog-confirm").dialog(
            {
                modal: true,  // 创建模式对话框
                autoOpen: false, //默认隐藏对话框
                //对话框打开时默认设置
                open: function (event, ui) {
                    $(".ui-dialog-titlebar-close", $(this).parent()).hide(); //隐藏默认的关闭按钮
                },
                //对话框功能按钮
                buttons: {
                    "提交": function () {
                        submitData(); //提交几何与属性信息到后台处理
                        $(this).dialog('close'); //关闭对话框
                    },
                    "取消": function () {
                        $(this).dialog('close'); //关闭对话框                     
                        vectLayer.getSource().removeFeature(currentFeature); //删除当前绘制图形
                    }
                }
            });


            /**
            * 鼠标单击事件监听处理函数
            */
            function singleclickFun(e) {
                var pixel = map.getEventPixel(e.originalEvent);
                var hit = map.hasFeatureAtPixel(pixel);
                map.getTargetElement().style.cursor = hit ? 'pointer' : '';
                //当前鼠标位置选中要素
                var feature = map.forEachFeatureAtPixel(e.pixel,
                            function (feature, layer) {
                                return feature;
                            });
                //如果当前存在热区要素                   
                if (feature) {
                    $("#dialog-delete").dialog("open"); //打开删除要素设置对话框
                    currentFeature = feature; //当前绘制的要素
                }
            }
            /**
            * 通过后台删除热区要素
            */
            function deleteData(feature) {
                var regID = feature.get('id'); //要素的ID

                //通过ajax请求将数据传到后台文件进行删除处理
                var opType = "delete";  //删除数据
                var tableName = "HotSportsInfo";  //数据表名称
                $.ajax({
                    url: '../RegDataHandler.ashx', //请求地址
                    type: 'POST',  //请求方式为post
                    data: { 'type': opType, 'table': tableName, 'fID': regID }, //传入参数 
                    dataType: 'text', //返回数据格式
                    //请求成功完成后要执行的方法  
                    success: function (response) {
                        alert(response); //提示删除成功
                        vectLayer.getSource().removeFeature(currentFeature); //删除当前选中热区要素
                    },
                    error: function (err) {
                        alert("执行失败");
                    }
                });       
            }

            // 初始化删除要素信息设置对话框
            $("#dialog-delete").dialog(
                {
                    modal: true,  // 创建模式对话框
                    autoOpen: false, //默认隐藏对话框
                    //对话框打开时默认设置
                    open: function (event, ui) {
                        $(".ui-dialog-titlebar-close", $(this).parent()).hide(); //隐藏默认的关闭按钮
                    },
                    //对话框功能按钮
                    buttons: {
                        "删除": function () {
                            deleteData(currentFeature);  //通过后台删除数据库中的热区要素数据并同时删除前端绘图                      
                            $(this).dialog('close'); //关闭对话框
                        },
                        "取消": function () {
                            $(this).dialog('close'); //关闭对话框                     

                        }
                    }
                });


                /**
                * 【显示热区】功能按钮处理函数
                */
                document.getElementById('showReg').onclick = function () {
                    map.un('pointermove', pointermoveFun, this); //移除鼠标移动事件监听
                    selectRegData(); //通过后台查询热区要素显示并实现热区功能
                };

                /**
                * 【绘制热区】功能按钮处理函数
                */
                document.getElementById('drawReg').onclick = function () {
                    map.removeInteraction(draw); //移除绘制控件
                    map.un('singleclick', singleclickFun, this); //移除鼠标单击事件监听

                    //实例化交互绘制类对象并添加到地图容器中
                    draw = new ol.interaction.Draw({
                        source: vectLayer.getSource(), //绘制层数据源
                        type: /** @type {ol.geom.GeometryType} */"Polygon"  //几何图形类型
                    });
                    map.addInteraction(draw);
                    //添加绘制结束事件监听，在绘制结束后保存信息到数据库
                    draw.on('drawend', drawEndCallBack, this);
                };

                /**
                * 【删除热区】功能按钮处理函数
                */
                document.getElementById('deleteReg').onclick = function () {
                    map.un('pointermove', pointermoveFun, this); //移除鼠标移动事件监听

                    map.un('singleclick', singleclickFun, this); //移除鼠标单击事件监听
                    map.on('singleclick', singleclickFun, this); //添加鼠标单击事件监听
                };
    </script>
</body>
</html>
